<template>
  <div>

    <div>
      <el-row style="margin: 10px" :gutter="1">
        <el-col :span="4">
          <el-input
            v-model="selectFrom.companyName"
            placeholder="请输入公司名称"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col span="1">
          <el-button type="primary" @click="this.getCompanyInfo(this.pageNum)"
            >搜索</el-button
          >
        </el-col>
        <el-col span="1">
          <AddInfo />
        </el-col>
        <el-col span="3" :push="15">
          <el-button round @click="searchCollapseShowFun"
            ><el-icon><search /></el-icon>高级检索</el-button
          >
        </el-col>
      </el-row>
    </div>

    <!-- 高级检索 -->
    <div>
      <!-- 折叠面板 -->
      <el-collapse class="searchHead" v-model="showSearch">
        <el-collapse-item name="search">
          <template #title
            ><el-icon size="15px"><Search /></el-icon
            >&nbsp;&nbsp;&nbsp;高级检索</template
          >

          <!-- 表单数据排版 -->
          <el-form ref="selectFrom">
            <!-- 第一行 -->
            <el-row :gutter="15">
              <el-col :offset="2" :span="4"
                ><el-form-item label="公司名称"
                  ><el-input v-model="selectFrom.companyName" /></el-form-item
              ></el-col>
              <el-col :span="4"
                ><el-form-item label="法人名称"
                  ><el-input v-model="selectFrom.corporation" /></el-form-item
              ></el-col>
              <el-col :span="4"
                ><el-form-item label="公司地址"
                  ><el-input v-model="selectFrom.companyAddress" /></el-form-item
              ></el-col>
              <el-col :span="4"
                ><el-form-item label="税号&nbsp;&nbsp;&nbsp;"
                  ><el-input v-model="selectFrom.taxNumber" /></el-form-item
              ></el-col>
              <el-col :span="4"
                ><el-form-item label="开户银行"
                  ><el-input v-model="selectFrom.accountBank" /></el-form-item
              ></el-col>
            </el-row>

            <el-row>
              <el-button @click="this.getCompanyInfo(this.pageNum)">查询</el-button>
              <el-button
                @click="
                  this.selectFrom = {};
                  this.getCompanyInfo(this.pageNum);
                "
                >清空</el-button
              >
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <UpdateInfo ref="companyUpdate" />
    <el-table
      :data="tableData"
      style="width: 100%"
      border="true"
      max-height="65vh"
      height="65vh"
      v-loading="loading"
      element-loading-text="Loading..."
    >
      <template #empty>
        <el-empty description="未查询到数据"></el-empty>
      </template>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60px"
      ></el-table-column>
      <el-table-column
        prop="companyName"
        label="公司名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="companyAddress"
        label="公司地址"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="corporation"
        label="公司法人"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="phoneNum"
        label="联系电话"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="taxNumber"
        label="税号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="accountBank"
        label="开户行"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="accountNum"
        label="卡号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="files"
        label="附件"
        align="center"
      >
      <template #default="scope">
        <template v-if="scope.row.files.length == 0">无</template>
        <template v-for="data in scope.row.files" :key="data.id">
              <a
                :href="
                  'http://101.43.150.171:8082/PaperInfos/downLoad?fileName=' +
                  data.utilName +
                  '&fileNameSrc=' +
                  data.utilSrcName +
                  '&parameter=' +
                  token
                "
                >{{ data.utilSrcName }}</a
              >
              <br />
        </template>
      </template>
      </el-table-column>
      <el-table-column prop="" label="操作" align="center" width="250">
        <template #default="scope">
          <el-button-group>
            <el-button type="primary" @click="updateInfo(scope.row.id)"
              :disabled="!this.hasAuth('sys:sysParam:companyInfo:update')"
              >修改</el-button
            >
            <el-button type="danger" @click="delectInfo(scope.row.id)"
              :disabled="!this.hasAuth('sys:sysParam:companyInfo:delete')"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="currentPage"
      :page-size="pageSize"
      background="true"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script >
import axios from "../../../utils/request";
import { ElNotification } from "element-plus";
import AddInfo from "./companyInfoAdd.vue";
import UpdateInfo from "./companyInfoUpdate.vue"
import { Search} from "@element-plus/icons";
export default {
  components:{AddInfo,UpdateInfo,Search},
  data() {
    return {
      currentPage: 1,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      total: "",
      loading: false,
      selectFrom: {},
      showSearch:false
    };
  },
  methods: {
    /**
     * 功能函数
     */
    //获取公司信息
    getCompanyInfo(pageNum) {
      this.loading = true;
      axios({
        method: "post",
        url: "/CompanyInfos/searchInfo/" + pageNum + "/" + this.pageSize,
        data: this.selectFrom,
      }).then((res) => {
        this.tableData = res.data.data.pageInfo.list;
        this.total = res.data.data.pageInfo.total;
        this.loading = false;
        // console.log(res.data)
      });
    },
    //换页函数
    handleCurrentChange(val) {
      this.getCompanyInfo(this.currentPage);
      this.currentPage = val;
    },
    //数据删除
    delectInfo(id) {
      let self  = this;
      axios
        .get("/CompanyInfos/delete", { params: { id: id } })
        .then((reponse) => {
          if (reponse.data.status === 200) {
            ElNotification({
              message: reponse.data.message,
              type: "success",
              duration:'1500'
            });
            self.getCompanyInfo(this.currentPage);
          }
        });
    },
    updateInfo(id){
      this.$refs.companyUpdate.showDialog(id);
    },
    hasAuth(perm) {
      var authority = this.$store.state.menus.permList;
      return authority.indexOf(perm) > -1;
    },
    /**
     * 高级搜索展开与关闭
     */
    searchCollapseShowFun() {
      this.searchSenior = !this.searchSenior;
      if (this.searchSenior) {
        this.showSearch = "search";
      } else {
        this.showSearch = "";
      }
    },
  },
  computed: {
    token: {
      get() {
        return localStorage.getItem("token");
      },
    },
  },
  mounted() {
    this.getCompanyInfo(this.pageNum);
  }
};
</script>
